<template>
    <div class="photoinfo-container">
        <!-- 图片标题 -->
        <h3 class="photo-title">{{photoinfolist[0].title}}</h3>
        <p class="photo-subtitle">
            <span>发表时间：{{photoinfolist[0].add_time | dateFormat}}</span>
            <span>点击：{{photoinfolist[0].click}}次</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>


        <!-- 图片内容区域 -->
        <div class="photo-content" v-html="photoinfolist[0].content">
            
        </div>

        <!-- 评论子组件  已经有现成的 -->
        <comm-box :id="this.id">

        </comm-box>
    </div>
</template>
<script>
// 导入 评论子组件
import comment from "../subcomponents/comment.vue";

export default {
  data() {
    return {
      // 从路由中获取到的 图片id
      id: this.$route.params.id,
      photoinfolist: [
        {
          id: 1,
          title: "这是图片列表第一篇图片文章的标题",
          add_time: "2018/07/08 08:08:08",
          click: 124,
          content: "这是图片文章的主体内容"
        }
      ],
      // 缩略图存放数组
      slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          },
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
        ]
    };

  },
  created() {
    this.getPhotoinfoList();
    this.getImg();
  },
  methods: {
    // 获取图片的详情
    getPhotoinfoList() {
      // this.$http.get('api/getimageInfo'+this.id).then(result=>{
      //     if(result.body.status === 0){
      //         this.photoinfolist = result.body.message[0]
      //     }
      // })
      this.$http.get('../../../static/data.json').then((response) => {
          // 响应成功回调
          //console.log(response.data.seller);
      }, (response) => {
        // 响应错误回调
        alert('服务器请求失败');
      });

    },
    getImg() {},
    handleClose() {
      console.log("close event");
    }
  },
  // 用来注册子组件
  components: {
    "comm-box": comment
  }
};
</script>

<style lang="scss" scoped>
.photoinfo-container {
  padding: 0 5px;
  .photo-title {
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color: #26a2ff;
  }
  .photo-subtitle {
    font-size: 13px;
    color: #226aff;
    display: flex;
    justify-content: space-between;
  }
  .photo-content {
    padding: 0 5px;
    font-size: 13px;
    img {
      width: 100%;
    }
  }
}
</style>

